<template>
  <div ref="container">
    <van-tabs v-model="active" sticky :offset-top="50">
      <van-tab title="全部" swipeable>
          <ul>
              <li v-for="item in tabCont" :key="item.id" >
                  <img :src="item.small_image" alt="" @click="onShopAdd(item)">
                  <p class="conttitle">{{item.name}}</p>
                   <p class="js">{{item.spec}}</p>
                  <div class="contPrice">          
                    <p class="price1">￥{{item.price}}<span>￥{{item.origin_price}}</span></p>
                    <van-icon  @click="onAdd(item)" name="shopping-cart-o" class="shop_icon"/>
                  </div>
                 
              </li>
          </ul>
      </van-tab>
      <van-tab title="晚餐">
           <ul>
              <li v-for="item in dinnerCont" :key="item.id">
                  <img :src="item.small_image" alt="">
                  <p class="conttitle">{{item.name}}</p>
                   <p class="js">{{item.spec}}</p>
                  <div class="contPrice">          
                    <p class="price1">￥{{item.price}}<span>￥{{item.origin_price}}</span></p>
                    <van-icon @click="onAdd(item)" name="shopping-cart-o" class="shop_icon"/>
                  </div>
                 
              </li>
          </ul>
      </van-tab>
      <van-tab title="人气">
           <ul>
              <li v-for="item in hotCont" :key="item.id">
                  <img :src="item.small_image" alt="">
                  <p class="conttitle">{{item.name}}</p>
                   <p class="js">{{item.spec}}</p>
                  <div class="contPrice">          
                    <p class="price1">￥{{item.price}}<span>￥{{item.origin_price}}</span></p>
                    <van-icon @click="onAdd(item)" name="shopping-cart-o" class="shop_icon"/>
                  </div>
                 
              </li>
          </ul>
      </van-tab>
      <van-tab title="必选">
           <ul>
              <li v-for="item in mustCont" :key="item.id">
                  <img :src="item.small_image" alt="">
                  <p class="conttitle">{{item.name}}</p>
                   <p class="js">{{item.spec}}</p>
                  <div class="contPrice">          
                    <p class="price1">￥{{item.price}}<span>￥{{item.origin_price}}</span></p>
                    <van-icon @click="onAdd(item)" name="shopping-cart-o" class="shop_icon"/>
                  </div>
                 
              </li>
          </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
  name: "HomeShopText",
  data() {
    return {
      //商品列表
        //全部：
      tabCont: [],
        //晚餐：
      dinnerCont:[],
        //人气：
      hotCont:[],
        //必选：
      mustCont:[],
      active: 0,
    };
  },
  async created() {
    let res = await this.$http.getHomeApi();
    console.log(res.data.data.list[12].product_list);
    console.log(res.data.data);
    //全部：
    this.tabCont = res.data.data.list[12].product_list;
    //晚餐：
    this.dinnerCont=res.data.data.list[3].product_list;
    //人气：
    this.hotCont=res.data.data.list[5].product_list;
    //必选：
    this.mustCont=res.data.data.list[4].product_list;
  },
  methods:{
     onAdd(shopProt){
      Toast('成功加入购物车');
       this.$store.commit('onAddCont',shopProt);
    },
    onShopAdd(prot){
        this.$store.commit('onAdd',prot);
        this.$router.push('cont')
      }
  }
};
</script>

<style lang="scss" scoped>
  .van-tabs__line{
      background-color: #42b95f;
  }
ul {
  width: 7.5rem;
  height: auto;
  display: flex;
  margin:0 auto;
  padding-bottom: 1.2rem;
    background: #f5f5f5;
  flex-wrap: wrap;
  li {
    width: 3.3rem;
    padding:.12rem;
    background: #fff;
    border-radius: .2rem;
    margin:.15rem .10rem;
    img {
      width:90%;
      height: 3rem;
    }
    p{
        width:7.5rem;
        font-size: 0.3rem;
        margin-left:.2rem;
        text-align: left;
    }
    .conttitle{
        width:90%;  //设置宽度
        font-size: .3rem;
        text-align: left;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;  //使用自适应布局
        -webkit-line-clamp: 1;  //设置超出行数，要设置超出几行显示省略号就把这里改成几
        -webkit-box-orient: vertical;
    }
    .js{
        width:80%;
        color:#888;
        margin-top:.1rem;
        height: 1rem;
        font-size:.26rem;
    }
    .price1{
        font-size: .35rem;
        color:#f56;
    }
    span{
        font-size: 0.25rem;
        color:#888;
        margin-left:.1rem;
        text-decoration: line-through;
    }
    .contPrice{
        margin-top:.1rem;
        width:auto;
        display: flex;
        justify-content: space-between;
        .van-icon{
            margin-right:.25rem;
            margin-top:-0.09rem;
        }
    }
  }
}
</style>